<template>
	<view class="">
		<u-navbar title="缴费提醒" @leftClick="leftClick" :autoback="true"></u-navbar>
		<view class="flex-col page">
		  <view class="flex-col space-y-23 group_3">
		    <view class="flex-col">
		      <view class="flex-row justify-between section_3">
		        <view class="group_4">
		          <text class="font_2 text_5">近30日</text>
		          <text class="font_3 text_6">需缴费的专利</text>
		        </view>
		        <view class="group_5">
		          <text class="font_3 text_7">共</text>
		          <text class="font_2 text_8">300</text>
		          <text class="font_3 text_9">条</text>
		        </view>
		      </view>
		      <view class="flex-col space-y-18 list">
		        <view class="flex-col space-y-26 list-item" :key="i" v-for="(item, i) in costTips">
		          <view class="flex-row space-x-26 group_6 view">
		            <text class="font_4">用于确定和调整一辆汽车的底盘几何机构构...</text>
		            <view class="flex-col items-center text-wrapper"><text class="font_5">发明</text></view>
		          </view>
		          <view class="flex-row space-x-7 group_7 view_2">
		            <text class="font_6">专利号：</text>
		            <text class="font_7 text_10">2021203461490</text>
		          </view>
		          <view class="flex-row space-x-7 group_8 view_3">
		            <text class="font_6">缴费截止日：</text>
		            <text class="font_7 text_11">2022-06-20</text>
		          </view>
		          <view class="flex-row space-x-6 group_9 view_4">
		            <text class="font_6">应缴费用：</text>
		            <text class="font_8 text_12">90.00</text>
		          </view>
		          <view class="flex-row space-x-8 group_10 view_5">
		            <text class="font_6 text_13 text_14">案件状态：</text>
		            <text class="font_9 text_15 text_16">专利权维持</text>
		          </view>
		        </view>
		      </view>
		    </view>
		    <view class="flex-row justify-center" >
		      <image
		        class="image_7"
		        src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/632afc43e391320011695f3b/16647963991026731520.png"
		      />
		      <text class="font_11 text_33">向上滑动</text>
		      <text class="font_11 text_34">加载更多</text>
		    </view>
		  </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				costTips:[1,2,3,4]
			};
		},
		onLoad(option) {
			
		},
		methods:{
			leftClick(){
				if (getCurrentPages().length > 1) {
					uni.navigateBack();
				} else {
					uni.switchTab({
						url: '../../pages/index/index'
					})
				}
			},
			
			submit(){
				
			}
		}
	}
</script>

<style lang="scss" scoped>
.page {
  background-color: #f4f6f8;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  .space-y-23 {
    & > view:not(:first-child),
    & > text:not(:first-child),
    & > image:not(:first-child) {
      margin-top: 23rpx;
    }
    .section_3 {
      padding: 31rpx 29rpx 27rpx 31rpx;
      background-color: #ffffff;
      .group_4 {
        line-height: 23rpx;
        height: 23rpx;
        .text_5 {
          line-height: 23rpx;
        }
        .text_6 {
          line-height: 23rpx;
        }
      }
      .group_5 {
        line-height: 22rpx;
        height: 22rpx;
        .text_7 {
          line-height: 22rpx;
        }
        .text_8 {
          line-height: 18rpx;
        }
        .text_9 {
          line-height: 22rpx;
        }
      }
      .font_3 {
        font-size: 24rpx;
        font-family: Microsoft YaHei;
        line-height: 21rpx;
        color: #666666;
      }
      .font_2 {
        font-size: 24rpx;
        font-family: Microsoft YaHei;
        color: #f43738;
      }
    }
    .space-y-18 {
      & > view:not(:first-child),
      & > text:not(:first-child),
      & > image:not(:first-child) {
        margin-top: 18rpx;
      }
      .space-y-26 {
        & > view:not(:first-child),
        & > text:not(:first-child),
        & > image:not(:first-child) {
          margin-top: 26rpx;
        }
        .space-x-26 {
          & > view:not(:first-child),
          & > text:not(:first-child),
          & > image:not(:first-child) {
            margin-left: 26rpx;
          }
          .font_4 {
			width: 80%;
            font-size: 30rpx;
            font-family: Microsoft YaHei;
            line-height: 30rpx;
            color: #5677fc;
			overflow:hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
          }
          .text-wrapper {
            padding: 2rpx 0 4rpx;
            flex-shrink: 0;
            background-color: #ffffff;
            border-radius: 4rpx;
            width: 70rpx;
            height: 26rpx;
            border: solid 1rpx #37c637;
            .font_5 {
              font-size: 19rpx;
              font-family: Microsoft YaHei;
              line-height: 18rpx;
              color: #37c637;
            }
          }
        }
        .group_6 {
          align-self: flex-start;
          line-height: 29rpx;
        }
        .view {
          align-self: initial;
          line-height: initial;
        }
        .space-x-7 {
          & > view:not(:first-child),
          & > text:not(:first-child),
          & > image:not(:first-child) {
            margin-left: 7rpx;
          }
          .font_7 {
            font-size: 26rpx;
            font-family: Microsoft YaHei;
            line-height: 21rpx;
            color: #444444;
          }
          .text_10 {
            margin-top: 3rpx;
          }
          .text_11 {
            margin-top: 3rpx;
          }
        }
        .group_7 {
          margin-top: 19rpx;
        }
        .view_2 {
          margin-top: initial;
        }
        .group_8 {
          margin-top: 25rpx;
        }
        .view_3 {
          margin-top: initial;
        }
        .space-x-6 {
          & > view:not(:first-child),
          & > text:not(:first-child),
          & > image:not(:first-child) {
            margin-left: 6rpx;
          }
          .font_8 {
            font-size: 26rpx;
            font-family: Microsoft YaHei;
            line-height: 21rpx;
            color: #ec8e00;
          }
          .text_12 {
            margin-top: 3rpx;
          }
        }
        .group_9 {
          margin-top: 25rpx;
        }
        .view_4 {
          margin-top: initial;
        }
        .font_6 {
          font-size: 26rpx;
          font-family: Microsoft YaHei;
          line-height: 26rpx;
          color: #777777;
        }
        .space-x-8 {
          & > view:not(:first-child),
          & > text:not(:first-child),
          & > image:not(:first-child) {
            margin-left: 8rpx;
          }
          .text_13 {
            color: #888888;
          }
          .text_14 {
            color: initial;
          }
          .font_9 {
            font-size: 26rpx;
            font-family: Microsoft YaHei;
            line-height: 26rpx;
            color: #444444;
          }
          .text_15 {
            color: #555555;
          }
          .text_16 {
            color: initial;
          }
        }
        .group_10 {
          margin-top: 27rpx;
        }
        .view_5 {
          margin-top: initial;
        }
      }
      .list-item {
        padding: 31rpx 30rpx 41rpx;
        background-color: #ffffff;
      }
    }
    .list {
      padding-top: 19rpx;
    }
    .image_7 {
      width: 20rpx;
      height: 20rpx;
    }
    .font_11 {
      font-size: 19rpx;
      font-family: Microsoft YaHei;
      line-height: 18rpx;
      color: #666666;
    }
    .text_33 {
      margin-left: 12rpx;
    }
    .text_34 {
      margin-left: 2rpx;
    }
  }
  .group_3 {
    padding-bottom: 35rpx;
    flex: 1 1 auto;
    overflow-y: auto;
  }
}
</style>